<template>
  <div class="success-container">
    <!-- <input type="hidden" class="order_status" value="{$order.status}">
    <input type="hidden" class="order_no" value="{$order.order_no}"> -->
    <div class="success">
      <div v-if="order.status == 0 || order.status == 4">
        <img :src="success_loading" alt="" />
        <span class="msg">支付中......</span>
      </div>
      <div v-else>
        <img :src="success" alt="" />
        <span class="msg">支付成功</span>
      </div>
      <p>
        <em v-if="order.pay_type == 5">&dollar;</em>
        <em v-else>{{ mSymbol.name }}</em>
        <i v-if="order.is_presale == 1">{{ resData.deposit_money }}</i>
        <i v-else>{{ order.payment }}</i>
      </p>
    </div>
    <ul class="pay_success">
      <li>
        <div class="left">支付方式</div>
        <div class="right" v-if="resData.is_deposit_pay">
          {{ resData.deposit_alias }}支付
        </div>
        <div
          class="right"
          v-if="!resData.is_deposit_pay && order.is_presale != 1"
        >
          <span
            v-if="order.post_fee <= order.balance_fee && order.balance_fee > 0"
            >余额支付</span
          >
          <span v-else>{{ order.pay_info }}</span>
        </div>
        <div
          class="right"
          v-if="!resData.is_deposit_pay && order.is_presale == 1"
        >
          <span v-if="order.balance_fee > 0">余额支付</span>
          <span v-else>{{ order.pay_info }}</span>
        </div>
      </li>
      <li>
        <div class="left">订单编号</div>
        <div class="right">{{ order.order_no }}</div>
      </li>
      <li>
        <div class="left">付款时间</div>
        <div class="right">{{ order.pay_time }}</div>
      </li>
    </ul>
    <!-- 按钮 -->
    <div class="button">
      <van-button
        @click="JumpUrl(resData.backUrl)"
        class="btn red-btn"
        round
        block
        >查看订单</van-button
      >
      <van-button
        @click="JumpName('item-list', { supplier: resData.supplier_id })"
        class="btn"
        color="#F20B22"
        round
        plain
        hairline
        >继续购物</van-button
      >
      <van-button
        @click="JumpUrl(resData.is_back_url_dz)"
        v-if="resData.is_jnlr_dz && resData.is_jnlr_dz == 1"
        class="btn"
        color="#F20B22"
        round
        plain
        hairline
        >继续结算</van-button
      >
    </div>
    <!--  -->
    <div class="j-active-box" v-if="pay_gift" v-show="isShow">
      <div class="diy_active_box_shade"></div>
      <div class="diy_active_box">
        <p class="box_del" @click="closePop"></p>
        <!--优惠券-->
        <div class="active_content" v-if="pay_gift.activity_type == 1">
          <img :src="pay_gift_background_img ? pay_gift_background_img : 'https://img.wifenxiao.com/h5-wfx/images/pay1.png'" alt="" />
          <span @click="JumpUrl(pay_gift.target_url)">立即领取</span>
        </div>

        <!--投票-->
        <div class="active_content" v-if="pay_gift.activity_type == 2">
          <img :src="pay_gift_background_img ? pay_gift_background_img : 'https://img.wifenxiao.com/h5-wfx/images/pay2.png'" alt="" />
          <span @click="JumpUrl(pay_gift.target_url)" class="orange toupiao"
            >立即参加</span
          >
        </div>

        <!--微页面-->
        <div class="active_content" v-if="pay_gift.activity_type == 3">
          <img :src="pay_gift_background_img ? pay_gift_background_img : 'https://img.wifenxiao.com/h5-wfx/images/pay3.png'" alt="" />
          <span @click="JumpUrl(pay_gift.target_url)" class="orange"
            >立即领取</span
          >
        </div>

        <!--游戏-->
        <div class="active_content" v-if="pay_gift.activity_type == 4">
          <img :src="pay_gift_background_img ? pay_gift_background_img : 'https://img.wifenxiao.com/h5-wfx/images/pay4.png'" alt="" />
          <span @click="JumpUrl(pay_gift.target_url)" class="orange game"
            >立即去玩小游戏</span
          >
        </div>
      </div>
    </div>
    <div v-if="resData.dz_pay_img" @click="JumpMiniProgram()">
      <img :src="resData.dz_pay_img" style="width: 100%" mode="widthFix">
    </div>
    <!-- 提示关注公众号 -->
    <div class="wechat_account" :class="{ show: isWechatAccount }">
      <div class="wechat_account_box">
        <h6>
          订阅物流<img
            src="https://img.wifenxiao.com/h5-wfx/images/user/icon_del.png"
            alt=""
            @click="closeWechatAccount"
          />
        </h6>
        <div class="weChat_account_main">
          <div class="weChat_account_main_img">
            <img :src="wx_qrcode" alt="" />
          </div>
          <p>长按访问店铺公众号，查看订单物流</p>
          <button class="wechat_account_btn" @click="clickNoRemind">
            我知道了，不再提醒
          </button>
        </div>
      </div>
    </div>
    <!-- 提示关注公众号 -->

    <!--定制 我的导师  start -->
    <div
      class="my_teacher"
      v-if="resData.is_my_mentor == 1"
      v-show="isShowTeacher"
    >
      <!-- 老师二维码 -->
      <section class="qrcode_overlay"></section>
      <section class="detail_qrcode_box">
        <div class="content">
          <h3 class="title">Hi，你好!</h3>
          <p class="text">
            我是您的导师，将为您提供一对一辅导，<br />让您福利早知道，快来加我吧！
          </p>
          <div class="qrcode_box">
            <img :src="resData.my_mentor_qrcode_id" alt="" />
          </div>
        </div>
        <div class="btn">
          <button
            class="btn-item copy"
            @click="handleClipboard(resData.my_mentor_wx_id)"
          >
            复制微信号，去添加
          </button>
          <button class="btn-item noWarn" @click="closeMyTeacher">
            我已添加，不再提醒
          </button>
        </div>
        <i class="closed_box" @click="closeMyTeacher"></i>
      </section>
    </div>
    <!--定制 end-->
    <!-- 商品附带图片信息 -->
    <img-goods :orderId="id" />
    <!--    梅之音生物 定制 微信号  start    -->
    <div class="wechatNum-wrap" v-if="isCopyWechat">
      <div class="wechatNum-main">
        <img
          src="https://img.wifenxiao.com/h5-wfx/images/DZ/meizhiyin/fuwushang.png"
          class="bgImg"
        />
        <img
          src="https://img.wifenxiao.com/h5-wfx/images/DZ/meizhiyin/close.png"
          @click="wechatClose()"
          class="closeImg"
        />
        <img
          src="https://img.wifenxiao.com/h5-wfx/images/DZ/meizhiyin/copy.png"
          @click="copyClick(order.weixin_account, $event)"
          class="copyImg"
        />
        <p class="wechatNum">{{ order.weixin_account }}</p>
      </div>
    </div>
    <!--    梅之音生物 定制 微信号  end    -->
  </div>
</template>

<script>
import Vue from "vue";
import { openPage } from "@/utils/utils.js";
import imgGoods from '@/views/order/components/imgGoods'
import { buySeccess, orderIsPay, notRemindAgain } from "@/api/public/index.js";
import { mapGetters } from "vuex";
export default Vue.extend({
  data() {
    return {
      success: "https://img.wifenxiao.com/h5-wfx/images/success3.png",
      danger: "https://img.wifenxiao.com/h5-wfx/images/danger1.png",
      success_loading:
        "https://img.wifenxiao.com/h5-wfx/images/wait.png?v=2",
      resData: {},
      order: {
        status: 0
      },
      info: Object,
      pay_gift: null,
      wl_info: {},
      isShow: true,
      isShowTeacher: true,
      payCount: 0,
      // 提示关注公众号
      isWechatAccount: false,
      wx_qrcode: "",
      isCopyWechat: false, // 梅之音生物 定制
      id: '',
      pay_gift_background_img: ''
    };
  },
  components: {
    imgGoods
  },
  created() {
    this.init();
  },
  mounted() {
    // 监听事件
    this.$Bus.$on("commonConfig", (res) => {
      this.wx_qrcode = res.data.publicAccountInformat.wx_qrcode;
    });
  },
  methods: {
    JumpMiniProgram() {
      if (this.resData.dz_pay_appid) {
        // 跳转小程序
        wx.navigateToMiniProgram({
          appId: this.resData.dz_pay_appid,
          // path: 'pages/merchantAddress/merchantAddress',
          success(res) {
            // 打开成功
            // console.log(res)
          },
          fail(error) {
            wx.showModal({
              content: '跳转失败，请重试',
              showCancel: false,
              success: (res) => {}
            })
          }
        })	
      }
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data);
    },

    JumpUrl(url, data) {
      // console.log(url);
      // TODO 跳转切换
      openPage(url);
      // window.location.href = url
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data);
    },
    handleClipboard(text, event) {
      // TODO 小程序wx复制
        wx.setClipboardData({
          data: text,
          success(res) {
            wx.getClipboardData({
              success(res) {
                wx.showToast({
                  title: "复制成功",
                  icon: "none",
                });
              },
            });
          },
        });
    },
    closeMyTeacher() {
      this.isShowTeacher = false;
    },
    closePop() {
      this.isShow = false;
    },
    init() {
      this.id = this.$route.query.id
      const data = {
        id: this.$route.query.id,
      };
      this.$loadingWrap.show()
      buySeccess(data).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          // TODO如果后台返回了链接则跳转到后台返回的链接
          if (res.data && res.data.redirect_url) {
            openPage(res.data.redirect_url, 1);
          }
          this.resData = res.data;
          this.order = this.resData.order;
          this.info = this.resData.info;
          this.pay_gift = this.resData.pay_gift;
          this.pay_gift_background_img = this.resData.pay_gift_background_img || ''
          this.wl_info = this.resData.wl_info;
          if (this.resData.pay_success_attention == 1) {
            this.isWechatAccount = true;
          } else {
            this.isWechatAccount = false;
          }
          // 梅之音生物定制
          if (this.order.weixin_account) {
            this.isCopyWechat = true;
          }
          // 如果不是支付成功
          if (this.order.status == 1 || this.order.status == 4) {
            const payTimer = setInterval(() => {
              this.payCount++;
              orderIsPay({ order_no: this.order.order_no }).then((res) => {
                // 如果请求次数大于20
                if (this.payCount >= 20) {
                  clearInterval(payTimer);
                  // TODO jq换成原生js
                  document
                    .querySelectorAll(".success img")
                    .forEach((item, index) => {
                      item.setAttribute("src", this.danger);
                    });
                  document
                    .querySelectorAll(".success .msg")
                    .forEach((item, index) => {
                      item.innerHTML = "支付失败";
                    });
                  // $('.success').find('img').attr('src', this.danger)
                  // $('.success').find('.msg').text('支付失败')
                  return false;
                }
                if (res.status && res.status == 1) {
                  if (res.data.is_pay == 1) {
                    clearInterval(payTimer);
                    document
                      .querySelectorAll(".success img")
                      .forEach((item, index) => {
                        item.setAttribute("src", this.success);
                      });
                    document
                      .querySelectorAll(".success .msg")
                      .forEach((item, index) => {
                        item.innerHTML = "支付成功";
                      });
                    // $('.success').find('img').attr('src', this.success)
                    // $('.success').find('.msg').text('支付成功')
                    return false;
                  }
                }
              });
            }, 2000);
          }
        } else {
          this.$Error(res.msg);
        }
      });
    },
    // 提示关注公众号
    closeWechatAccount() {
      this.isWechatAccount = false;
    },
    clickNoRemind() {
      notRemindAgain().then((res) => {
        if (res.status == 1) {
          this.isWechatAccount = false;
        } else {
          this.$Error(res.msg);
        }
      });
    },
    // 复制
    copyClick(text, e) {
      this.isCopyWechat = false;
        wx.setClipboardData({
          data: text,
          success(res) {
            wx.getClipboardData({
              success(res) {
                wx.showToast({
                  title: "复制成功",
                  icon: "none",
                });
              },
            });
          },
        });
    },
    wechatClose() {
      this.isCopyWechat = false;
    },
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(["mSymbol"]),
  },
});
</script>

<style lang="scss">
@import "src/styles/mixin";
@import "src/styles/publicSuccess/index";
.success-container {
  .customer {
    width: 100%;
    margin-top: 20px;
    background: #ffffff;
    padding: 30px;
    border-bottom: 1px solid #ededed;
    display: flex;
    align-items: center;
    overflow: hidden;
    img {
      &:first-child {
        margin: 0 30px 0 0;
      }
    }
    .icon {
      margin-top: 20px;
      width: 30px;
      height: 30px;
    }

    .customer_hold_text {
      height: 70px;
      text-align: center;
      p {
        color: #1c1b1b;
        font-size: 32px;
        line-height: 70px;
      }
    }
  }
  .customer_hold {
    width: 100%;
    padding: 30px 0;
    background: #fff;
    .customer_hold_img {
      width: 180px;
      height: 180px;
      margin: 0 auto 18px;
      overflow: hidden;
      img {
        max-width: 100%;
        width: 100%;
      }
    }
    p {
      font-size: 24px;
      text-align: center;
      color: #666;
    }
  }
  .diy_active_box_shade {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9997;
  }
  .diy_active_box {
    width: 560px;
    height: auto;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index: 9998;
    p {
      position: absolute;
      bottom: -100px;
      left: 50%;
      width: 76px;
      height: 76px;
      transform: translateX(-50%);
      background: url(https://img.wifenxiao.com/h5-wfx/images/customer/close.png)
        center/cover no-repeat;
      cursor: pointer;
    }
    .active_content {
      img {
        display: block;
        width: 560px;
      }
      position: relative;
      span {
        width: 460px;
        height: 106px;
        line-height: 100px;
        position: absolute;
        color: #ef564b;
        font-weight: bold;
        font-size: 36px;
        text-align: center;
        background: url(https://img.wifenxiao.com/h5-wfx/images/customer/btn_bg.png)
          center/cover no-repeat;
        bottom: 49px;
        left: 50%;
        transform: translateX(-50%);
        &.toupiao {
          height: 90px;
          line-height: 90px;
          @include gradient(top, rgba(252, 70, 42, 1), rgba(255, 63, 82, 1));
          color: #fff;
          border-radius: 45px;
          font-size: 32px;
        }
        &.game {
          transform: translateX(-48%) scale(0.9);
        }
      }
    }
  }
  .qrcode_overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9997;
  }
  .detail_qrcode_box {
    position: fixed;
    width: 560px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 10010;
    border-radius: 20px;
    padding: 30px 0;
    .content {
      text-align: center;
      .title {
        font-size: 36px;
        font-weight: bold;
        line-height: 60px;
      }
      .text {
        font-size: 28px;
        color: #666666;
        line-height: 40px;
        padding: 10px 0;
      }
      .qrcode_box {
        width: 300px;
        margin: 20px auto;
        img {
          width: 100%;
          height: auto;
        }
      }
    }
    .btn {
      padding: 0 50px;
      .btn-item {
        display: block;
        width: 100%;
        line-height: 76px;
        height: 76px;
        border: 1px solid rgba(242, 11, 34, 1);
        border-radius: 38px;
        color: #f20b22;
        font-size: 28px;
        text-align: center;
        margin-bottom: 30px;
        box-sizing: border-box;
        background: transparent;
        &.copy {
          border: 0;
          color: #fff;
          @include gradient(left, rgba(233, 1, 4, 1), rgba(254, 27, 73, 1));
        }
      }
    }
    .closed_box {
      position: absolute;
      bottom: -100px;
      left: 50%;
      width: 76px;
      height: 76px;
      transform: translateX(-50%);
      background: url(https://img.wifenxiao.com/h5-wfx/images/customer/close.png)
        center/cover no-repeat;
      cursor: pointer;
    }
  }
  // 提示关注公众号
  .wechat_account {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    &.show {
      display: block;
    }
    &_box {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: #fff;
      border-radius: 20px 20px 0px 0px;
      transition: all 0.3s ease-in-out;
      h6 {
        position: relative;
        font-weight: bold;
        font-size: 32px;
        color: #333333;
        height: 90px;
        line-height: 90px;
        border-bottom: 1px solid #ededed;
        img {
          position: absolute;
          right: 30px;
          top: 50%;
          width: 28px;
          transform: translateY(-50%);
        }
      }
      .weChat_account_main {
        padding: 42px 25px 35px;
        box-sizing: border-box;
        &_img {
          width: 342px;
          height: 342px;
          margin: 0 auto 22px;
          img {
            max-width: 100%;
            width: 100%;
          }
        }
        p {
          font-weight: 500;
          font-size: 26px;
          color: #666;
          margin-bottom: 48px;
        }
        .wechat_account_btn {
          font-size: 28px;
          color: #fff;
          width: 100%;
          height: 76px;
          line-height: 76px;
          text-align: center;
          background: linear-gradient(to right, #e90104, #fe1b49);
          border: none;
          border-radius: 38px;
        }
      }
    }
  }
}
.wechatNum-wrap {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .wechatNum-main {
    width: 540px;
    height: 832px;
    text-align: center;
    position: relative;
    .bgImg {
      width: 540px;
      height: 644px;
    }
    .closeImg {
      width: 102px;
      height: 104px;
      margin-top: 80px;
    }
    .copyImg {
      width: 244px;
      height: 64px;
      position: absolute;
      top: 490px;
      left: 50%;
      transform: translate(-50%, 0);
    }
    .wechatNum {
      width: 100%;
      text-align: center;
      font-size: 28px;
      color: #333333;
      position: absolute;
      top: 400px;
      left: 50%;
      transform: translate(-50%, 0);
      font-weight: 500;
    }
  }
}
</style>